<template>
  <el-dialog title="设置范围" :close-on-click-modal="false" :visible.sync="visible" :width="hzFs == '公式'?'1100px':'800px'"
             top="8vh">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">


      <el-container v-if="visible">
        <el-main style="max-height:45vh">
          <el-row v-for="(item,index) in dataForm.dataList" :key="index" class="groupBox">
            <el-col :span="20">
              <el-form-item label="活动名称" :prop="'dataList['+index+'].hdId'"
                            :rules="[{ required: true, message: '活动名称不能为空', trigger: 'blur' }]">
                <el-select v-model="item.hdId" filterable placeholder="请选择活动名称" @change="assignment($event,index)"
                           style="width:100%;">
                  <el-option v-for="item in cityOptions" :key="item.id" :label=" checkMark(item.mark) + item.hdName"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="测评票名称" :prop="'dataList['+index+'].hdHzmc'" :rules="[{ required: true, message: '测评票名称不能为空', trigger: 'blur' }]">
                <!-- <el-input v-model="dataForm.dataList[index].hdHzmc" placeholder="请输入统计名称"
                          style="width:100%;"></el-input> -->
                 <el-select v-model="dataForm.dataList[index].hdHzmc" filterable placeholder="请选择测评票名称"
                           style="width:100%;">
                  <el-option v-for="it in dataForm.dataList[index].tjList" :key="it.cppId" :label="it.cppName4View"
                             :value="it.cppId"></el-option>
                </el-select>
                <span v-if="false&&hzFs == '公式'" style="margin-left: 10px">公式代码：<span
                  style="color: #0d258d">{{
                    dataForm.dataList[index].hdId == "" ? "暂无" : ("h" + dataForm.dataList[index].hdId + "d")
                  }}</span></span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button @click="removeItem(index)" v-if="dataForm.dataList.length>1" style="float: right;"
                         icon="el-icon-minus"></el-button>
            </el-col>
            <el-button @click="addItem()" v-if="index==dataForm.dataList.length-1"
                       style="float: right; margin-top:20px;" icon="el-icon-plus"></el-button>
          </el-row>
        </el-main>
      </el-container>
      <el-card class="box-card"  v-if="hzFs == '公式'" style="margin-top: 20px;">
        <el-form-item label="计算公式" prop="sjData.hzJsgs" :rules="[{ required: true, message: '计算公式不能为空', trigger: 'blur' }, {
              max: 1000,
              message: '长度在最长1000个字符',
              trigger: 'blur'
            }]">
          <el-input v-model="dataForm.sjData.hzJsgs" type="textarea" :rows="2" placeholder="请输入计算公式" style="width:98%"></el-input><br>
          <span style="color: #0d258d;margin-left: 10px">示例：A1+A2+(B1+B2)/2+C1</span>
        </el-form-item>
        <el-form-item label="公式说明" prop="sjData.hzGssm" :rules="[{
              max: 1000,
              message: '长度在最长1000个字符',
              trigger: 'blur'
            }]">
          <el-input v-model="dataForm.sjData.hzGssm" placeholder="请输入公式说明" style="width:98%"></el-input><br>
        </el-form-item>
      </el-card>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
      <el-button type="primary" plain @click="visible = false">取消</el-button>
      
    </span>
  </el-dialog>
</template>

<script>
/*!
 * 绩效考核-测评统计设置范围
 *
 * @author zmk
 * @date 2021-07-08 09:30:00
 */
import {save4P1, selhdList, selHdfwbList,selCpdjList,selhdListByDcId,selhdidList4P1} from '@/api/ceping/cepinghzglhdfwb'
import {putObj} from '@/api/ceping/cepinghzglb'

export default {
  data() {
    return {
      visible: false,
      canSubmit: false,
      dataForm: {
        sjData: {
          hzJsgs:"",
          hzGssm:""
        },
        dataList: [{
          hzId: 0,
          hdId: '',
          hdName: '',
          hdHzmc: '',
          mark:''
        }],
        djName:""
      },
      cityOptions: [],
      hzId: 0,
      hzFs: '',
      fromPage:"",
      djList:[],
      dcId:"",
      tjList:[]
    }
  },
  methods: {
    checkMark(mark){
      var result = ''
        if(mark) result = mark + '|'
      return result;
    },
    //等次改变
    dengci(val){
      this.getselhdListByDcId(val,'改变')
    },
    //活动选定赋值         mark:''
    assignment(val, index) {
        this.getselhdidList(val,index)
    //   for (var a = 0; a < this.cityOptions.length; a++) {
    //     if (this.cityOptions[a].id == val) {
    //       this.dataForm.dataList[index].hdName = this.cityOptions[a].hdName;
    //       this.dataForm.dataList[index].hdHzmc = this.cityOptions[a].hdName;
    //        this.dataForm.dataList[index].mark = this.cityOptions[a].mark;
    //       break;
    //     }
    //   }
    },
    getselhdidList(id,index){
        selhdidList4P1(this.hzId,id).then(res=>{
          //  console.log("统计名称:"+JSON.stringify(res))
             this.dataForm.dataList[index].tjList=res.data.data;
        })
    },
    //添加数据项
    addItem() {
      this.dataForm.dataList.push({
        hzId: this.hzId,
        hdId: '',
        hdName: '',
        hdHzmc: '',
        mark:'',
        tjList:[]
      });
    },
    //移除数据项
    removeItem(index) {
      this.dataForm.dataList.splice(index, 1);
    },
    //初始化
    csh() {
      this.cityOptions = [];
      this.dataForm.dataList = [{
        hzId: this.hzId,
        hdId: '',
        hdName: '',
        hdHzmc: '',
        tjList:[]
      }];
    },

    init(data,fromPage) {
      this.dcId=data.dcId
      this.dataForm = {
        sjData: {
          hzJsgs:"",
          hzGssm:""
        },
        dataList: [{
          hzId: 0,
          hdId: '',
          hdName: '',
          hdHzmc: '',
          tjList:[]
        }],
      }

      this.hzFs = data.hzFs;
      this.hzId = data.id;
      this.csh();
      this.visible = true;
      this.canSubmit = true;

      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.$set(this.dataForm, "sjData", JSON.parse(JSON.stringify(data)))
        if (this.hzId) {
        //   if(this.fromPage=='DC'){

        //   }else{
            selhdList().then(response => {
                this.cityOptions = response.data.data
              })
        //   }

          selHdfwbList(this.hzId).then(response => {
            if (response.data.data.length > 0) {

              this.dataForm.dataList = response.data.data.map(item=>{
                  item.tjList=[]
                  item.hdHzmc=item.hdHzmc*1
                  return item
              })
              this.dataForm.dataList.forEach((item,index)=>{
                  this.assignment(item.hdId,index)
              })
            }
          })
        }
      });
    },
    getselhdListByDcId(dcId,text){
      selhdListByDcId(dcId).then(response => {
                this.cityOptions = response.data.data;
                // if(text=='初始'){
                //   this.assignment(this.dataForm.dataList[0].hdId,0)
                // }else{
                //   this.assignment("","")
                //   this.dataForm.dataList.forEach(item=>{
                //     item.hdId="";
                //     item.hdHzmc=""
                //   })
                // }


              })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          var dataFormDataList=this.dataForm.dataList.map(item=>{
            var temp={
              hzId:item.hzId,
              hdId:item.hdId,
              hdHzmc:item.hdHzmc,
            }
            return temp
          })
          save4P1(dataFormDataList).then(data => {
            putObj(Object.assign(this.dataForm.sjData)).then(data => {
              this.$notify.closeAll();
              this.$notify.success('设置成功')
              this.visible = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.canSubmit = true;
            });
          }).catch(() => {
            this.canSubmit = true;
          });
        }
      })
    }
  }
}
</script>
